<template>
    <div>
      <div :style="{marginBottom: '10px', border: '1px solid', padding: '10px', borderRadius: '10px', marginTop: index === 0 ? '15px' : ''}" v-for="(contrast, index) in contrastProductTable">
        <el-form ref="form" label-width="80px">
          <el-row :gutter="10">
            <el-col :span="6">
                <el-form-item label="比价单">
                  <el-radio v-model="orderCode" :label="contrast.orderCode">
                    {{contrast.orderCode}}
                  </el-radio>
                </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="厂家">
                {{contrast.manufacturerName}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="交货期">
                {{contrast.jhValid}}天
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="总价">
                {{contrast.allPrice}}
              </el-form-item>
            </el-col>
<!--            <el-col :span="8">-->
<!--              <el-form-item label="含税总价">-->
<!--                {{contrast.hsAllPrice}}-->
<!--              </el-form-item>-->
<!--            </el-col>-->
          </el-row>
        </el-form>
        <h3>商品信息</h3>
        <el-button
        type="info"
        plain
        icon="el-icon-upload2"
        size="mini"
        @click="handleAlterStatus(contrast, index)"
        v-hasPermi="['wms:inquireOrder:add']"
      >{{contrast.showFlag ? '隐藏' : '展开'}}</el-button>
        <el-table :ref="'productTable' + index" :data="contrast.products" v-show="contrast.showFlag">
          <el-table-column type="index" width="55" align="center" label="序号"/>
          <el-table-column label="产品编码" align="center" prop="productCode" :show-overflow-tooltip="true"/>
          <el-table-column label="产品名称" align="center" prop="productName" :show-overflow-tooltip="true"/>
          <el-table-column label="产品型号" align="center" prop="modal" :show-overflow-tooltip="true"/>
          <el-table-column label="计数单位" align="center" prop="unitName" />
          <el-table-column label="商品数量" align="center" prop="productNum" />
          <el-table-column label="商品单价" align="center" prop="oldOnlyPrice" />
          <el-table-column label="商品总价" align="center" prop="oldAllPrice" />
        </el-table>
      </div>
    </div>
</template>

<script>

export default {
  name: "ComparisonProduct",
  dicts: ['wms_product_cc_unit'],
  props: {
    contrastProductTable: {
      type: Array,
      default() {
        return [];
      }
    },
    openFlag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          //时间选择框必须大于今天
          return time.getTime() < Date.now() - 8.64e7;
          // 或者 return time.getTime() < Date.now();
        }
      },
      orderCode: null
    }
  },
  methods: {
    // 获取选择商品列表
    getSelectedProductList(){
      if (this.orderCode) {
        let obj = this.contrastProductTable.filter(item => item.orderCode === this.orderCode)[0]
        obj.products.forEach(item => {
          item.oldOnlyPrice = item.onlyPrice
          item.oldAllPrice = item.allPrice
          item.priceComparisonOrder = this.orderCode
        })

        return {
          cjJhValid: obj.jhValid,
          products: obj.products,
          orderCodes: [this.orderCode]
        }
      } else {
        let msg = ''
        if (!this.orderCode) {
          msg = '未选择比价单'
        }
        this.$message.error(msg)
        return {}
      }
    },
    handleAlterStatus(contrast, index) {
      contrast.showFlag = !contrast.showFlag
      this.$set(this.contrastProductTable, index, contrast)
    }
  },
  watch:{
    openFlag: {
      handler(nval, oldval){
        if (nval){
          this.orderCode = null
        }
      }
    }
  }
}
</script>

<style scoped>
/deep/ .el-form{
  height: 38px;
}
</style>
